<template>
	<view>
		<view class="Tips" v-if="shoplist.length==0" :style='{height:height+"rpx"}'>
			<Empty mode="shop" marked="购物车还是空空的"></Empty>
			<Btn marked="去逛逛" backgroundColor="#4CD964" :width="400" :height="80" :borderRadius="60" :marginTop="10" @click.native="Jump"></Btn>
		</view>
		<view class="shop-list" v-else>
			<checkbox-group  @change="checkGroupChange">
				<block v-for="(item,index) in shoplist" :key="index">
					<tui-swipe-action :actions="actions" @click="Getaction(item)">
							<template v-slot:content>
								<ShopCarItem mode="shop" :box="true" :Data="item" :checked="item.checked">
									<view class="operation">
										<view class="add" @click="control==true?reduce(item):''">
											-
										</view>
										<view class="num">
											{{item.cart_num}}
										</view>
										<view class="reduce" @click="control==true?add(item):''">
											+
										</view>
									</view>
								</ShopCarItem>
								<SplitLine backgroundColor="#eeeeee" :width="90" :height="2"></SplitLine>
							</template>
					</tui-swipe-action>
				</block>
			</checkbox-group>
		</view>
		<view class="bottom">
			<checkbox-group @change="allChoose">
				<label class="radio">
					<checkbox value="all" :checked="checked" :disabled="radiochec"/><text>全选</text>
				</label>
			</checkbox-group>
			
			<view class="total-box">
				<view class="" style="width: 50rpx;">
					合计
				</view>
				<view class="price">
					￥{{total_price}}
				</view>
				<Btn marked="去结算" backgroundColor="#5C6B7E" :width="240" :height="70" :borderRadius="6" @click.native="goPayment"></Btn>
			</view>
		</view>
	</view>
</template>

<script>
	import Empty from "../../../components/bw-Empty/bw-Empty.vue";
	import Btn from "../../../components/bw-Btn/bw-btn.vue"
	import SplitLine from "../../../components/bw-Split-line/bw-Split-line.vue"
	import tuiSwipeAction from "../../../components/bw-swipe-action/bw-swipe-action.vue"
	import ShopCarItem from "../../shop/components/bw-shopCar-Item.vue";
	import {cartList,cartChange,cartDelete} from "../../../api/shop.js"
 	export default {
		components:{
			Empty,
			Btn,
			SplitLine,
			tuiSwipeAction,
			ShopCarItem
		}, 
		data() {
			return {
				shop:false,
				height :0,
				checked:false,
				JumpUrl:"/pages/shop/shopList",
				checkedarr:[],
				values:"",
				actions: [{
					name: '删除',
					color: '#fff',
					fontsize: 30, //单位rpx
					width: 70, //单位px
					background: '#FD3B31'
				}],
				shoplist:[
					
				],
				total_price:0,
				control:true,//防止多次点击
				cart_ids:[],
				radiochec:true,
			}
		},
		onShow() {
			//获取屏幕高度
			this.getHight()
			cartList().then(res=>{
				res.data.cart_list.forEach(item=>{
					item["checked"]=false
				})
				this.shoplist=res.data.cart_list
				this.total_price=0
				//判断购物车数据是否为空 全选按钮是否可用
				if(res.data.cart_list.length==0){
					this.radiochec=true
				}
				else{
					this.radiochec=false
				}
				this.checked=false
			})
		},
		methods: {
			//加
			async add(item){
				//防止多次点击
				this.control=false
				item.cart_num++
				await cartChange({
					goods_id:item.goods_info.id,
					op_type:0,
					cart_num:1
				}).then(res=>{
					cartList().then(res=>{
						//更新购物车数据  保持前边选中状态
						for(let i=0;i<res.data.cart_list.length;i++){
							for(let t=0;t<this.cart_ids.length;t++){
								if(this.cart_ids[t]==res.data.cart_list[i].id){
									res.data.cart_list[i].checked=true
									break;
								}else{
									res.data.cart_list[i].checked=false
								}
							}
						}
						this.shoplist=res.data.cart_list
						this.control=true
					})
				})
				//判断是否为选中 计算总价
				if(item.checked==true){
					this.total_price=this.total_price+Number(item.sale_price)
				}
			},
			//减
			async reduce(item){
				//防止多次点击
				this.control=false
				if(item.cart_num>0){
					item.cart_num--
					await cartChange({
						goods_id:item.goods_info.id,
						op_type:1,
						cart_num:1
					}).then(res=>{
						cartList().then(res=>{
							for(let i=0;i<res.data.cart_list.length;i++){
								for(let t=0;t<this.cart_ids.length;t++){
									if(this.cart_ids[t]==res.data.cart_list[i].id){
										res.data.cart_list[i].checked=true
										break;
									}else{
										res.data.cart_list[i].checked=false
									}
								}
							}
							this.shoplist=res.data.cart_list
							//判断是否为空
							if(this.shoplist.length==0){
								this.checked=false
							}
							this.control=true
						})
						//判断是否为选中   计算总价
						if(item.checked==true){
							this.total_price=this.total_price-Number(item.sale_price)
						}
					})
					
				}else{
					return
				}
			},
			//获取屏幕高度
			getHight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.height = res.screenHeight*2-200
					}
				})
			},
			Jump(){
				uni.navigateTo({
					url:this.JumpUrl
				})
			},
			//全选
			allChoose(e){
				if (this.checked == false){
					this.checked = true
					for (let item of this.shoplist){
						item.checked=true
						this.cart_ids.push(item.id)
						this.total_price+=Number(item.total_price) 
					}
				}else{
					for (let item of this.shoplist){
						item.checked=false
						this.total_price-=Number(item.total_price)
					}
					this.cart_ids=[]
					this.checked = false
				}
				
			},
			goPayment(){
				if(this.cart_ids.length==0){
					uni.showToast({
						title:"请选择要购买商品",
						icon:"none"
					})
				}
				else{
					uni.navigateTo({
						url:"../../orderPay/payment?ids="+this.cart_ids.join()
					})
					//选中商品后跳转 将选中商品Id清空
					this.cart_ids=[]
				}
				
			},
			//删除
			Getaction(item){
				this.cart_ids.splice(this.cart_ids.indexOf(item.id),1)
				cartDelete({
					id:item.id
				}).then(res=>{
					cartList().then(res=>{
						for(let i=0;i<res.data.cart_list.length;i++){
							for(let t=0;t<this.cart_ids.length;t++){
								if(this.cart_ids[t]==res.data.cart_list[i].id){
									res.data.cart_list[i].checked=true
									break;
								}else{
									res.data.cart_list[i].checked=false
								}
							}
						}
						this.shoplist=res.data.cart_list
						//判断是否为空
						if(this.shoplist.length==0){
							this.checked=false
						}
						this.control=true
					})
				})
				//判断是否为选中   计算总价
				if(item.checked==true){
					this.total_price=this.total_price-Number(item.sale_price)
				}
			},
			//复选框
			checkGroupChange(e) {
				// console.log(e)
				// // this.check_value = e.detail.value
				// if(e.detail.value.length==this.shoplist.length){
				// 	this.checked=true
				// }
				this.cart_ids=e.detail.value
				if(e.detail.value.length==0){
					for (let item of this.shoplist){
						item.checked=false
					}
				}
				console.log(this.cart_ids)
				this.total_price=0
				for(let i=0;i<this.shoplist.length;i++){
					for(let t=0;t<e.detail.value.length;t++){
						if(e.detail.value[t]==this.shoplist[i].id){
							this.shoplist[i].checked=true
							this.total_price+=Number(this.shoplist[i].total_price)
							break;
						}else{
							this.shoplist[i].checked=false
						}
					}
				}
				if (e.detail.value.length>0 && e.detail.value.length==this.shoplist.length){
					this.checked = true
				}else{
					this.checked = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Tips{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.shop-list{
		padding-top: 40rpx;
		padding-bottom: 200rpx;
	}
	.bottom{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #D1D1D3;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		position: fixed;
		bottom: 100rpx;
		left: 0rpx;
		z-index: 999;
		/deep/ uni-radio-group, uni-checkbox-group{
			width: auto;
		}
		.radio{
			display: flex;
			align-items: center;
			/deep/ .uni-checkbox-input{
				border-radius: 60rpx;
			}
			/deep/ .uni-checkbox-input-checked{
				background-color: #007AFF;
				color: #FFFFFF !important;
			}
		}
		.total-box{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: red;
			font-weight: bolder;
			.price{
				font-size: 32rpx;
				margin: 0 20rpx;
			}
		}
	}
		.operation{
			width: 55%;
			height: 44rpx;
			display: flex;
			justify-content: space-around;
			.add{
				width: 44rpx;
				height: 44rpx;
				text-align: center;
				line-height: 36rpx;
				font-size: 60rpx;
				border: 1px solid #5C6B7E;
				border-radius: 6rpx;
			}
			.num{
				width: 44rpx;
				height: 44rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.reduce{
				width: 44rpx;
				height: 44rpx;
				text-align: center;
				line-height: 44rpx;
				font-size: 44rpx;
				border: 1px solid #5C6B7E;
				border-radius: 6rpx;
			}
		}
</style>